<template>
	<widget-root :styles="styles" v-if="content.data.length">
		<view class="seckill" :class="themeName" :style="{
        'background-color': styles.content_bg_color,
        'border-radius': `${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(
          styles.border_radius_top
        )}rpx ${$px2rpx(styles.border_radius_bottom)}rpx ${$px2rpx(
          styles.border_radius_bottom
        )}rpx`,
      }">
			<view class="seckill-header flex" :style="[headerStyle]">
				<view class="flex-1 flex">
					<image mode="heightFix" v-if="content.header_icon_image" class="flex-none m-r-10"
						style="height: 22px" :src="$getImageUri(content.header_icon_image)" />
					<view class="line-1" :style="{
              'max-width': '400rpx',
			  'font-weight':'bold',
              color: styles.header_title_color,
              'font-size': `${$px2rpx(styles.header_title_size)}rpx`,
            }">
						{{ content.header_title }}
					</view>
					<view style="height: 40rpx;display: flex;align-items: flex-end; margin-left: 10rpx;">
						<view class="countdown mgr">{{hours}}</view>
						<view class="mgr" style="color: #FF5F29; font-weight: bold;">:</view>
						<view class="countdown mgr">{{minutes}}</view>
						<view class="mgr" style="color: #FF5F29; font-weight: bold;">:</view>
						<view class="countdown mgr">{{seconds}}</view>
					</view>
				</view>
				<view class="more flex-none xs" v-if="content.show_haeder_more" :style="{
            color: styles.header_more_color,
          }">
					<router-link to="/bundle/pages/goods_seckill/goods_seckill">
						{{ content.header_more_text }}
						<u-icon name="arrow-right" size="26"></u-icon>
					</router-link>
				</view>
			</view>
			<view class="seckill-goods" :style="{
          margin: `-${$px2rpx(styles.margin / 2)}rpx`,
          padding: '20rpx',
        }">
				<view class="goods-lists" :class="{
            lists: content.style == 1,
            swiper: content.style == 2,
          }">
					<view class="goods-wrap" v-for="(item, index) in content.data" :key="index">
						<router-link :to="{
                path: '/bundle/pages/seckill_detail/seckill_detail',
                query: { id: item.id },
              }">
							<view class="goods-item" :style="{
                  'background-color': styles.goods_bg_color,
                  margin: `${$px2rpx(styles.margin / 2)}rpx`,
                  'border-radius': `${$px2rpx(styles.goods_border_radius)}rpx`,
                }">
								<view class="goods-image">
									<view class="u-image">
										<u-image :src="item.image" width="100%" height="100%" />
									</view>
								</view>
								<view class="goods-info p-10">
									<view v-if="content.show_title" class="m-b-10 name" :style="{
                      color: styles.title_color,
                    }">
										<view :class="content.style == 2 ? 'line-1' : 'line-2'">
											{{ item.name || "这里是商品标题" }}
										</view>
									</view>
									<view class="muted xs" :style="{
                      color: styles.sell_color,
                    }" v-if="content.style == 1 && content.show_sell">
										已抢{{ item.activity_sales }}件
									</view>
									<view class="flex price-btn flex-wrap">
										<view class="flex-1 flex col-baseline">
											<view v-if="content.show_price" class="price m-r-10">
												<price :content="item.activity_price" :color="styles.price_color"
													:font-weight="500" mainSize="34rpx" minorSize="26rpx" />
											</view>
											<view v-if="content.show_scribing_price">
												<price :content="item.sell_price" color="#999999" mainSize="26rpx"
													minorSize="26rpx" :line-through="true" />
											</view>
										</view>
										<view class="buy-btn xs" v-if="content.style == 1 && content.show_btn" :style="{
                        'background-color': styles.btn_bg_color,
                        color: styles.btn_color,
                      }">
											{{ content.btn_text }}
										</view>
									</view>
								</view>
							</view>
						</router-link>
					</view>
				</view>
			</view>
		</view>
	</widget-root>
</template>

<script type="text/javascript">
	export default {
		props: {
			content: {
				type: [Object, Array],
			},
			styles: {
				type: [Object, Array],
			},
		},
		data() {
			return {
				hours: '00',
				minutes: '00',
				seconds: '00',
			};
		},
		created() {
			setInterval(res => {
				[this.hours, this.minutes, this.seconds] = this.getYMDHMS(this.getCurrentDateTime(), this.content
					.expiration_date.replace(/-/g, '').replace(/ /g, '').replace(/:/g, ''))
			}, 1000)
		},
		methods: {
			getYMDHMS(startTime, endTime) {
				if (startTime.length < 14 || endTime.length < 14) {
					alert('时间格式不正确');
				}
				var startArr = [startTime.substring(0, 4), startTime.substring(4, 6), startTime.substring(6, 8), startTime
					.substring(8, 10), startTime.substring(10, 12), startTime.substring(12, 14)
				]; //切分开始时间为数组
				var endArr = [endTime.substring(0, 4), endTime.substring(4, 6), endTime.substring(6, 8), endTime.substring(
					8, 10), endTime.substring(10, 12), endTime.substring(12, 14)]; //切分结束时间为数组
				var dateStart = new Date(startArr[0], startArr[1], startArr[2], startArr[3], startArr[4], startArr[
					5]); //采用new Date(yyyy,mth,dd,hh,mm,ss);创建方式分别传入年月日时分秒
				var dateEnd = new Date(endArr[0], endArr[1], endArr[2], endArr[3], endArr[4], endArr[5]);
				var dateInterval = dateEnd.getTime() - dateStart.getTime() //获取时间差毫秒
				//计算出相差天数
				var days = Math.floor(dateInterval / (24 * 60 * 60 * 1000));
				//计算小时数
				var hourLevel = dateInterval % (24 * 60 * 60 * 1000);
				var hours = Math.floor(hourLevel / (60 * 60 * 1000))
				//计算分钟数
				var minutesLevel = hourLevel % (60 * 60 * 1000);
				var minutes = Math.floor(minutesLevel / (60 * 1000));
				//计算秒数
				var seconds = Math.round((minutesLevel % (60 * 1000)) / 1000);
				hours = parseInt(hours) + (parseInt(days) * 24)
				return [String(hours).padStart(2, '0'), String(minutes).padStart(2, '0'), String(seconds).padStart(2, '0')]
			},
			getCurrentDateTime() {
				const now = new Date();
				const dateParts = [
					now.getFullYear(),
					now.getMonth() + 1, // 月份是从0开始的，所以需要+1
					now.getDate(),
					now.getHours(),
					now.getMinutes(),
					now.getSeconds()
				].map(number => String(number).padStart(2, '0'));
				return dateParts.join(''); // 根据需要可以更改分隔符，例如使用' '或':'
			}

		},
		computed: {
			headerStyle() {
				const {
					header_bg_type,
					header_bg_image
				} = this.content;
				const {
					header_bg_color
				} = this.styles;
				return header_bg_type == 1 ? {
					"background-color": header_bg_color,
				} : {
					"background-image": `url(${this.$getImageUri(header_bg_image)})`,
				};
			},
		},
	};
</script>

<style lang="scss" scoped>
	.seckill {
		overflow: hidden;

		.seckill-header {
			color: #fff;
			height: 100rpx;
			background-color: #ff624b;
			background-repeat: no-repeat;
			background-size: 100% auto;
			padding: 0 10rpx 0 20rpx;

			.countdown {
				background-image: url();
				width: 40rpx;
				height: 40rpx;
				background-repeat: no-repeat;
				background-size: contain;
				font-size: 24rpx;
				text-align: center;
			}

			.mgr {
				margin-right: 4rpx;
				line-height: 40rpx;
			}
		}

		.seckill-goods {
			.goods-lists {
				overflow: hidden;

				&.swiper {
					overflow-x: auto;
					overflow-y: hidden;
					display: flex;

					.goods-wrap {
						flex: 0 0 36%;
						width: 36%;
					}
				}

				&.lists {
					.goods-wrap {
						.goods-item {
							flex-direction: row;

							.goods-image {
								width: 240rpx;
								padding-top: 240rpx;
							}

							.goods-info {
								position: relative;
								padding: 20rpx;

								.name {
									line-height: 36rpx;
									height: 72rpx;
								}

								.price-btn {
									position: absolute;
									right: 20rpx;
									left: 20rpx;
									bottom: 20rpx;
								}
							}
						}
					}
				}

				.goods-wrap {
					overflow: hidden;

					.goods-item {
						overflow: hidden;
						display: flex;
						flex-direction: column;

						.goods-image {
							position: relative;
							width: 100%;
							padding-top: 100%;
							box-sizing: border-box;

							.u-image {
								position: absolute;
								top: 0;
								right: 0;
								bottom: 0;
								left: 0;
								width: 100%;
							}
						}

						.goods-info {
							flex: 1;

							.name {
								color: #333333;
							}

							.price {
								@include font_color();
							}

							.buy-btn {
								padding: 12rpx 20rpx;
								color: #ffffff;
								background-color: #ff2c3c;
								border-radius: 60rpx;
							}
						}
					}
				}
			}
		}
	}
</style>